<extend name="Common/base"/>
<block name="title">测试</block>
<block name="css">
    <link rel="stylesheet" href="../../../../Public/Home/styles/test.css">
</block>
<block name="banner">
    <div id="container" style="min-width: 310px; height: 90%; margin: 0 auto"></div>
</block>
<block name="content" >
    <div class="section" name="test" id="test">
        <div class="header-title" style="padding-bottom: 0; padding-top: .5rem">
            <h2 class="cn-title">性格小测试</h2>
            <h3 class="en-title">准备好测试了吗？那就开始吧!（单选题）</h3>
        </div>
        <div class="row question_list">
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>01</span>对新事物下决心做好</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、轻松自如融入任何环境</li>
                    <li>B、表情生动多手势</li>
                    <li>C、准确知道所有细节之间的逻辑关系</li>
                </ul>
            </div>
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>02</span>完成一件事后才接手新事</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、充满乐趣与幽默感</li>
                    <li>B、用逻辑与事实服人 </li>
                    <li>C、在任何冲突中不受干扰，保持冷静</li>
                </ul>
            </div>
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>03</span>容易接受任何情况和环境</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、对周围的人事十分在乎</li>
                    <li>B、独立性强，机智，凭自已的能力判断</li>
                    <li>C、充满动力与兴奋</li>
                </ul>
            </div>
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>04</span>不主动交谈，经常是被动的回答者</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、保持可靠、忠心、稳定</li>
                    <li>B、任何事都能讲成惊天动地的故事</li>
                    <li>C、发号施令别人不敢造次</li>
                </ul>
            </div>
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>05</span>始终精神愉快，并把快乐推广到周围</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、情绪平稳，反应永远能让人预料到 </li>
                    <li>B、对学术、艺术特别爱好</li>
                    <li>C、自我肯定个人能力与成功</li>
                </ul>
            </div>
            <div class="col-md-10 col-md-push-1">
                <h4 class="qh"><span>06</span>有系统、有条理安排事情</h4>
                <ul class="list-unstyled list-inline ans">
                    <li>A、愿改变，很快与人协调配合</li>
                    <li>B、毫不保留，坦率发言</li>
                    <li>C、自信任何事都会好转</li>
                </ul>
            </div>

        </div>
    </div>
</block>
<block name="footer_content">
    <div class="row forms" style="height: 100%;display: flex;justify-content: center;align-items: center;">
        <form action="{:U('save_test')}" method="post">
            <div class="col-md-5 col-md-push-1 col-sm-5 col-sm-push-1 col-xs-10 col-xs-push-1 form-group">
                <lable class="sr-only">真实姓名</lable>
                <input type="text" class="form-control" name="nickname" placeholder="真实姓名">
            </div>
            <div class="col-md-5 col-md-push-1 col-sm-5 col-sm-push-1 col-xs-10 col-xs-push-1 form-group">
                <lable class="sr-only">QQ/微信</lable>
                <input type="text" class="form-control" name="qq" placeholder="QQ/微信">
            </div>
            <div class="col-md-5 col-md-push-1 col-sm-5 col-sm-push-1 col-xs-10 col-xs-push-1 form-group">
                <lable class="sr-only">手机号码</lable>
                <input type="text" class="form-control" name="phone" placeholder="手机号码">
            </div>
            <div class="col-md-5 col-md-push-1 col-sm-5 col-sm-push-1 col-xs-10 col-xs-push-1 form-group">
                <lable class="sr-only">邮箱</lable>
                <input type="text" class="form-control" name="mail" placeholder="邮箱">
            </div>
            <button class="btn btn-default submit" type="button">提交回答</button>
        </form>
    </div>
</block>
<block name="js">
    <script src='../../../../Public/Home/scripts/jquery.transit.min.js'></script>

<script>
    $(function(){
        $('.container').fullpage({
            afterLoad:function(link, index){
                if (index == 2) {
                    $('.dot').each(function (index) {
                        $(this).transition({ rotate: 420*(index+1)+'deg' , opacity: 1} , 2500 );
                    })
                }
                $('.section').eq(index-1).find('.header-title').css('opacity',1).addClass('animated bounceInUp');
            },
            verticalCentered : false,
            resize : true,
            anchors:['head' ,'a','test', 'foot']
        });

        $('.submit').click(function () {
            if ($('.ans').length > $('.ans li.selected').length) {
                alert('请完整做完测试再提交数据，否则我们无法为您准确评估!')
                return false;
            }else {
                var answer = []
                $('.ans').each(function(){
                    answer.push( $(this).find('li.selected').index() )
                })
            }
            var data = {
                nickname : $('[name=nickname]').val(),
                qq : $('[name=qq]').val(),
                phone : $('[name=phone]').val(),
                mail : $('[name=mail]').val(),
                answer : answer
            }

            $.ajax({
                type : 'post' ,
                url : "{:U('save_test')}" ,
                data : data,
                success : function (msg){
                    if (msg) {
                        alert(msg)
                    }else {
                        alert('恭喜你，完成了一道重要测试。我们的课程顾问已经收到了您的答卷，稍后测试结果会通过邮件的方式发送给您！')
                    }
                }
            })
        })

        $('.ans li').click(function () {
            $(this).parent().find('li').removeClass('selected').addClass('noselected')
            $(this).addClass('selected').removeClass('noselected')
            $(this).transition({ scale: 1.1  , color : 'red'})
        })

        // transform js

    });

    $(function () {
        // Create the chart
        Highcharts.chart('container', {
            credits: {
                enabled:false
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '广州市PHP就业薪资'
            },
            subtitle: {
                text: '以上数据收集于智联招聘、仅供参考'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '人数比例'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            },
            series: [{
                name: '薪酬比例',
                colorByPoint: true,
                data: [{
                    name: '4.5k-6k',
                    y: 23.2,
                    drilldown: '4.5k-6k'
                }, {
                    name: '6k-8k',
                    y: 28.4,
                    drilldown: '6k-8k'
                }, {
                    name: '8k-10k',
                    y: 11.7,
                    drilldown: '8k-10k'
                }, {
                    name: '10K-15K',
                    y: 10.5,
                    drilldown: '10K-15K'
                }, {
                    name: '20K-30K',
                    y: 5.1,
                    drilldown: '20K-30K'
                }, {
                    name: '30K-50K',
                    y: 5.1,
                    drilldown: '30K-50K'
                }]
            }],
            drilldown: {
                series: [{
                    name: 'Microsoft Internet Explorer',
                    id: 'Microsoft Internet Explorer',
                    data: [
                        [
                            'v11.0',
                            24.13
                        ],
                        [
                            'v8.0',
                            17.2
                        ],
                        [
                            'v9.0',
                            8.11
                        ],
                        [
                            'v10.0',
                            5.33
                        ],
                        [
                            'v6.0',
                            1.06
                        ],
                        [
                            'v7.0',
                            0.5
                        ]
                    ]
                }, {
                    name: 'Chrome',
                    id: 'Chrome',
                    data: [
                        [
                            'v40.0',
                            5
                        ],
                        [
                            'v41.0',
                            4.32
                        ],
                        [
                            'v42.0',
                            3.68
                        ],
                        [
                            'v39.0',
                            2.96
                        ],
                        [
                            'v36.0',
                            2.53
                        ],
                        [
                            'v43.0',
                            1.45
                        ],
                        [
                            'v31.0',
                            1.24
                        ],
                        [
                            'v35.0',
                            0.85
                        ],
                        [
                            'v38.0',
                            0.6
                        ],
                        [
                            'v32.0',
                            0.55
                        ],
                        [
                            'v37.0',
                            0.38
                        ],
                        [
                            'v33.0',
                            0.19
                        ],
                        [
                            'v34.0',
                            0.14
                        ],
                        [
                            'v30.0',
                            0.14
                        ]
                    ]
                }, {
                    name: 'Firefox',
                    id: 'Firefox',
                    data: [
                        [
                            'v35',
                            2.76
                        ],
                        [
                            'v36',
                            2.32
                        ],
                        [
                            'v37',
                            2.31
                        ],
                        [
                            'v34',
                            1.27
                        ],
                        [
                            'v38',
                            1.02
                        ],
                        [
                            'v31',
                            0.33
                        ],
                        [
                            'v33',
                            0.22
                        ],
                        [
                            'v32',
                            0.15
                        ]
                    ]
                }, {
                    name: 'Safari',
                    id: 'Safari',
                    data: [
                        [
                            'v8.0',
                            2.56
                        ],
                        [
                            'v7.1',
                            0.77
                        ],
                        [
                            'v5.1',
                            0.42
                        ],
                        [
                            'v5.0',
                            0.3
                        ],
                        [
                            'v6.1',
                            0.29
                        ],
                        [
                            'v7.0',
                            0.26
                        ],
                        [
                            'v6.2',
                            0.17
                        ]
                    ]
                }, {
                    name: 'Opera',
                    id: 'Opera',
                    data: [
                        [
                            'v12.x',
                            0.34
                        ],
                        [
                            'v28',
                            0.24
                        ],
                        [
                            'v27',
                            0.17
                        ],
                        [
                            'v29',
                            0.16
                        ]
                    ]
                }]
            }
        });
    });
</script>
</block>